/* jQuery事件绑定必须放置在函数中(1.jQuery页面初始加载事件) 2.js函数中 */
/* $ 等同于 jQuery */
$(function(){
	/* jQuery绑定事件 */
	/* 使用类class选择器 */
	// $(".checkUser").click(function(){
	// $("#errLoginInfo").html("请填写完整的用户信息！！！")
	// $("#errLoginInfo").css("color","red")
	// });
	
	//添加数据单继事件
	
	/* 使用后代选择器 + 元素过滤筛选*/
	$(".last button:first").click(function(){
		var $inputs = $("[name='input']");
		//each 语法：$(selector).each(function(index,element))
		//$.each(function(){});
		$inputs.each(function(i){
			if($($inputs[i].val == "")){
				$("#errLoginInfo").html("请填写完整的用户信息！！！");
				$("#errLoginInfo").css("color","red");
			}
			});
		});
		
	//初始加载数据函数调用
	//init();
	cssLoad();
	
	//搜索查询
	$(".rightButton button").click(function(){
		//获取搜索文本框值
		var $search = $("#search").val();
		if($search == ""){
			//默认查询所有
			init();
		}else{
			//使用jQuery获取dom元素中所有中签编码
			var $markNo = $(".markNo");
			var num = "";
			//循环遍历
			//1.将查询的数据重新加载绑定  2.删除查询匹配之外的数据
			$markNo.each(function(i){
				var mNo = $($markNo.get(i)).text();
				//console.log(mNo);
				if($search == mNo){
					//console.log(i);
					var $ul = $(".last ul").eq(i);
					//console.log($ul.html());
					$(".last").html($ul);
					num ++;
					loadBg();
				}
			});
			if(num == ""){
				$(".last").empty();
			}
		}
	});
});

/* 初始加载数据  --> json数据绑定*/
function init() {
	//初始加载列表数据
	//js操作dom元素 --> jQuery也可操作dom元素
	//ECMAScript 简称 ES,ES6(ECMAScript版本名称)
	//js定义数据类型的关键字，var是ES5之前定义数据类型关键字，ES6建议使用let定义数据类型关键字
	
	//使用json数据存储一个对象
	var arrStatus = new Array("已持照","未持照");
	var jsonUl = {"userName":"胡应修","markNo":"bj53473409","status":"1","phone":"13574556682","openDate":"2021-07-07"}
	
	//使用json存储多个对象
	var jsonUlArrs = [
						{"userName":"胡应修","markNo":"bj53473409","status":"1","phone":"13574556682","openDate":"2021-07-07"},
						{"userName":"尚晶品","markNo":"bj45562320","status":"1","phone":"18732365599","openDate":"2021-07-05"},
						{"userName":"张小雨","markNo":"hb99971228","status":"0","phone":"18774556690","openDate":"2021-07-04"},
						{"userName":"冯恢弘","markNo":"sh93452821","status":"1","phone":"13250504432","openDate":"2021-07-03"},
						{"userName":"温暖","markNo":"fj633009sdf","status":"1","phone":"13756690450","openDate":"2021-07-02"},
						{"userName":"张小野","markNo":"yr78gj8qg","status":"1","phone":"13030337456","openDate":"2022-12-29"},
						{"userName":"李利","markNo":"oupjg8jo3q8","status":"1","phone":"13412344900","openDate":"2022-12-29"},
						{"userName":"杜若晖","markNo":"so7gvpkz","status":"1","phone":"15833280099","openDate":"2022-12-29"}
		
	];
	var $ulStr = "";
	
	//清空.last层
	$(".last").empty();
	$(jsonUlArrs).each(function(index){
		var arrJson = jsonUlArrs[index];
		$ulStr += `<ul>
							<li>${arrJson.userName}</li>
							<li class="markNo">${arrJson.markNo}</li>
							<li class="status">${arrStatus[arrJson.status]}</li>
							<li>${arrJson.phone}</li>
							<li>${arrJson.openDate}</li>
							<li>
								<a href="javascript:void(0);">详情</a>&nbsp;&nbsp;
								<a href="javascript:void(0);" class="del">删除</a>
								</li>
						</ul>`;
	});
	
	//a href = javascript:void(0); 禁止刷新当前页面
	
	$(".last").append($ulStr);
	//$(".last").html($ulStr);
	/* let $ul = `<ul>
							<li>${jsonUl.userName}</li>
							<li>${jsonUl.markNo}</li>
							<li class="status">${arrStatus[jsonUl.status]}</li>
							<li>${jsonUl.phone}</li>
							<li>${jsonUl.openDate}</li>
						</ul>`;
	//项目前后端不分离：js面试题> 使用js或者jQuery动态追加绑定元素用什么方法  jQuery：append(); js :appendChild()
	//jQuery绑定dom元素
	//A.append(B); 将B元素追加到A元素中(内部)
	$(".last").append($ul); */
	
	//样式加载函数调用
	cssLoad();
}

//样式加载
function cssLoad(){
	//使用jQuery进行隔行换色
	$(".last ul").odd().css("background-color","#ccc");
	
	//状态字体变色
	$(".status").each(function(){
		if($(this).text() == "已持照"){
			$(this).css("color","green");
		}
		if($(this).text() == "未持照"){
			$(this).css("color","red");
		}
	});
	
	//使用jQuery动态删除当前数据
	// $(".del").click(function(){
	// 	if(confirm("确认删除？")){
	// 		$(this).parent().parent().remove();
	// 		loadBg();
	// 	}
	// });
	
	//jQuery 鼠标移进(mouseover、mouseenter)、移出(mouseout、mouseleave)
	//mouseover 和 mouseout ; mouseenter 和 mouseleave
	//mouseover 和 mouseenter 区别：mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。
	//								mouseenter 事件只在鼠标移动到选取的元素上时触发
	
	//鼠标移进
	$(".last ul").mouseover(function(){
		//1.css()样式添加的行内样式 2.addClass() 添加 class 样式
		//样式引用遵循"就近原则"，行内 > 内部 > 外部
		//选择器使用的遵循的是: ID选择器 > class选择器 >标签选择器
		//$(this).css("background-color","aqua");
		$(this).addClass("bg");
	});
	//鼠标移出
	$(".last ul").mouseout(function(){
		$(this).removeClass("bg");
	});
	
	//click mouseover mouseout 属于单个事件；hover 鼠标移进、移出事件，属于 复合事件
	// $(".last ul").hover(function(){
	// 	$(this).css("border","1px solid green");
	// },function(){
	// 	$(this).css("border","1px solid red");
	// });
}


/* js自定义函数 */
/* function check(){} */

//隔行换色
function loadBg() {
	var aLi = document.getElementsByTagName('ul');
		for (var i = 0; i < aLi.length; i++) {
			if (i % 2 == 0) {
				aLi[i].style.background = '#ccc';
				} else {
					aLi[i].style.background = '';
					}
		}
}

